/**
* 提现记录
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, FlatList, TextInput } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import { getStore } from '../../redux/index.js';
class ProfitBankListView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            refreshing: false,
            bank_list: []
        }
        this.pageSize = 100
        this.page = 1
        this.userInfo = getStore().getState().auth.userInfo
    }

    componentDidMount() {
        this.getDataList(true)
    }
    getDataList(refresh) {
        if (refresh) {
            this.setState({ refreshing: true })
        } else {
            this.setState({ loading: true })
        }
        this.props.dispatch(create_service(Contract.POST_USER_BANK_CARD_LIST, { page: this.page, pageSize: this.pageSize, type: '00', token: this.userInfo.token })).then((res) => {
            if (res) {
                if (refresh) {
                    this.setState({ bank_list: res.list, pagination: res.pagination, loading: false, refreshing: false })
                } else {
                    this.setState({ bank_list: this.state.bank_list.concat(res.list), pagination: res.pagination, loading: false, refreshing: false })
                }
            } else {
                this.setState({ loading: false, refreshing: false })
            }
        })
    }
    onEndReached() {
        if (this.state.bank_list.length != 0 && this.state.bank_list.length != this.state.pagination.total) {
            this.page += 1
            this.getDataList(false)
        }
    }
    renderItem({ item, index }) {
        return (
            <TouchableOpacity style={{ paddingVertical: 20, paddingHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: "#ffffff" }} activeOpacity={0.8} onPress={() => {
                if (this.props.reSelectBank) {
                    this.props.reSelectBank(item)
                }
                Actions.pop()
            }}>
                <View style={{ flexDirection: 'row' }}>
                    <Image style={{ width: 60, height: 60, borderRadius: 30 }} source={{ uri: item.bank_logo }}></Image>
                    <View style={{ justifyContent: 'space-between', marginLeft: 15 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>{item.name}</Text>
                        <Text style={{ fontSize: 15, color: "#333333" }}>{item.full_card_number}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    renderFootView() {
        return (
            <TouchableOpacity style={{ backgroundColor: '#ffffff', padding: 15, borderRadius: 8, width: Dimens.DeviceWidth - 30, flexDirection: 'row', marginLeft: 15, marginVertical: 20 }} onPress={() => {
                Actions.personalAddBankView({
                    reloadList: () => {
                        this.page = 1
                        this.getDataList(true)
                    }
                })
            }} activeOpacity={0.8} >
                <Image source={ImageRes.personal_plus} style={{ width: 18, height: 18, alignSelf: 'center' }}></Image>
                <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', marginLeft: 15 }}>添加银行卡</Text>
            </TouchableOpacity>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    ref={(list) => (this.flatList = list)}
                    keyExtractor={(item, index) => index.toString()}
                    data={this.state.bank_list}
                    ItemSeparatorComponent={() => <View style={{ backgroundColor: Colors.bg_color, height: 10 }} />}
                    showsVerticalScrollIndicator={false}
                    renderItem={this.renderItem.bind(this)}
                    refreshing={this.state.refreshing}
                    onEndReachedThreshold={0.1}
                    ListFooterComponent={this.renderFootView.bind(this)}
                    onRefresh={() => {
                        this.page = 1
                        this.getDataList(true)
                    }}
                    onEndReached={() => {
                        this.onEndReached();
                    }}
                />
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color,
    }
});
const ExportView = connect()(ProfitBankListView);
module.exports.ProfitBankListView = ExportView
